<!--
  author: tangcheng_cd
  create by: 2018/6/8
  descr: 选择表对话框
-->
<template>
  <el-dialog
    title="选择物理表"
    :visible.sync="dialogVisiable"
    @close="ardCancelBtnClick"
    class="select-meta-table-dialog"
    width="822px">
    <div class="search-box">
      <el-input
        placeholder="输入物理表名称搜索"
        auto-complete="on"
        v-model="searchText"
        class="pull-right"
      >
        <el-button type="primary"
                   slot="append"
                   @click="searchBtnClicked"
                   icon="el-icon-search">
        </el-button>
      </el-input>
    </div>
    <meta-table-grid
      ref="metaTableGrid"
      :display-columns="metaTableColumns">
    </meta-table-grid>
    <span slot="footer" class="dialog-footer">
      <el-button @click="ardCancelBtnClick" class="dialog-btn">关闭</el-button>
      <el-button @click="submitFormData" type="primary" class="dialog-btn">确定</el-button>
    </span>
  </el-dialog>
</template>

<script type="text/ecmascript-6">
import metaTableGrid from '../metaTableManager/metaTable'

export default {
  components: {
    metaTableGrid
  },
  name: 'select-meta-table-dialog',
  data () {
    return {
      dialogVisiable: false, // 默认隐藏
      searchText: null // 搜索内容
    }
  },
  computed: {
    metaTableColumns () {
      return ['meta_id', 'table_name', 'table_name_cns']
    }
  },
  methods: {
    // 取消操作
    ardCancelBtnClick () {
      this.dialogVisiable = false
    },
    // 显示
    show (submitHandler) {
      this.dialogVisiable = true
      this.searchText = null
      this.submitHandler = submitHandler
    },
    // 提交数据
    submitFormData () {
      let currentNode = this.$refs.metaTableGrid.getCurrentNode()
      if (this.submitHandler(currentNode)) {
        this.dialogVisiable = false
      }
    },
    // 搜索按钮被点击
    searchBtnClicked () {
      this.$refs.metaTableGrid.getDataByKeyword(this.searchText)
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.select-meta-table-dialog
  .el-dialog
    padding 15px 15px
    .el-dialog__body
      position relative
      height 370px
      padding 0px 0px
      .search-box
        width 250px
        float right
      .el-table
        height 320px !important
        .el-table__body-wrapper
          height 320px !important
      .meta-table-grid
        height auto
        padding-bottom 0px
    .el-dialog__footer
      padding 10px 20px 10px
</style>
